import { Map, View, Feature } from 'ol'
import * as olProj from 'ol/proj'
import { Style, Fill, Stroke, Circle, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { Tile as TileLayer } from 'ol/layer'
import { Vector as VectorLayer } from 'ol/layer'

import { Vector as VectorSource } from 'ol/source'

export var mapPointList = []
export var pointLayerSource = null
export var pointLayer = null
export var mapObject = null
export function setMapObject(mapObj) {
  mapObject = mapObj
}

// 添加地理坐标
export function setCenterOnClick() {
  console.log('mapObject', mapObject)
  mapObject.on('click', (evt) => {
    if (pointLayerSource) {
      // 获取当前点击点的 feature，如果存在就移除
      const feature = pointLayerSource.getFeatureById('curIconFeatureId')
      if (feature) {
        pointLayerSource.removeFeature(feature)
      }
    }
    addFeature(evt, 'curIconFeatureId')
  })
}
// 地图点击事件
export function addFeature(evt, id) {
  const currentCoodinate = evt.coordinate
  if (!Array.isArray(currentCoodinate)) {
    return
  }
  const location = {
    longitude: currentCoodinate[0],
    latitude: currentCoodinate[1]
  }
  // 创建点击后的元素
  const point = new Feature({
    geometry: new Point([location.longitude, location.latitude]),
    data: location
  })
  // 点的样式
  const iconStyle = new Style({
    image: new Icon({
      color: '#ffffff',
      crossOrigin: 'anonymous',
      src: require('@/assets/map_icon/point.png')
    })
  })
  // 设置样式
  point.setStyle(iconStyle)
  point.setId(id)
  addFeatureToLayer(point, 'centerIconLayer')
}
// 在图层上新增元素
export function addFeatureToLayer(feature, layerId) {
  const layer = getLayerById(layerId)
  const layerSource = layer.getSource()
  layerSource.addFeature(feature)
}
// 根据图层id来获取图层
export function getLayerById(layerId) {
  console.log(mapObject)
  const layers = mapObject.getLayers().getArray()
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].get('id') === layerId) {
      return layers[i]
    }
  }
  return null
}
// 添加地理坐标点
export function addPoint(location, layerId, featureId) {
  // 地理坐标数组
  const pointData = [location]

  pointData.map((item) => {
    // 创建点
    const point = new Feature({
      geometry: new Point([item.longitude, item.latitude]),
      data: item
    })
    // 点的样式
    const iconStyle = new Style({
      image: new Icon({
        color: '#ffffff',
        crossOrigin: 'anonymous',
        src: require('@/assets/map_icon/point.png')
      })
    })
    // 设置样式
    point.setStyle(iconStyle)
    point.setId(featureId)
    mapPointList.push(point)
  })

  // 创建geojson据源
  pointLayerSource = new VectorSource({ features: mapPointList })
  // 创建图层 并加载数据
  pointLayer = new VectorLayer({
    source: pointLayerSource,
    // 图层的id，这也非常重要
    id: layerId
  })
  // 将图层添加地图上
  mapObject.addLayer(pointLayer)
}

export function setMarker(mapObject, pointList) {
  const _style = new Style({
    image: new Circle({
      radius: 10,
      stroke: new Stroke({
        color: '#fff'
      }),
      fill: new Fill({
        color: '#3399CC'
      })
    })
  })
  var _featureList = []
  if (pointList) {
    pointList.forEach(point => {
      const _feature = new Feature({
        geometry: new Point(olProj.fromLonLat([point.longitude, point.latitude]))
      })
      _feature.setStyle(_style)
      _featureList.push(_feature)
    })
  }
  const _marker = new VectorLayer({
    source: new VectorSource({
      features: _featureList
    })
  })
  mapObject.addLayer(_marker)
}

export function addSiteMarker(mapObject) {
  var _featureList = []
  if (siteList) {
    siteList.forEach(point => {
      const _style = new Style({
        image: new Icon({
          scale: 0.4,
          src: require('@/assets/map_icon/site.png'),
          anchor: [0.48, 0.52]
        }),
        text: new Text({
          font: 'normal 12px 微软雅黑',
          // 对其方式
          textAlign: 'center',
          // 基准线
          textBaseline: 'middle',
          offsetY: -20,
          offsetX: 0,
          stroke: new Stroke({ color: '#00afff', width: 10 }),
          // backgroundFill: new Stroke({
          //   color: '#fffff'
          // }),
          // 文本填充样式
          fill: new Fill({
            color: '#ffffff'
          }),
          // padding: [5, 5, 5, 5],
          text: `${point.siteName}`
        })
      })
      const _feature = new Feature({
        geometry: new Point(olProj.fromLonLat([point.longitude, point.latitude]))
      })
      _feature.setStyle(_style)
      _featureList.push(_feature)
    })
  }
  const _marker = new VectorLayer({
    source: new VectorSource({
      features: _featureList
    })
  })
  mapObject.addLayer(_marker)
}

export function parseSiteObject() {
  var sitePointList = []
  siteList.forEach(site => {
    var siteO = {
      siteName: site.siteName,
      siteId: site.siteId,
      longitude: site.startLongitude,
      latitude: site.startLatitude
    }
    sitePointList.push(siteO)
  })
  console.log(sitePointList)
}

export const siteLineList = [
  {
    'beginRoad': 0.0,
    'endLatitude': 39.078412,
    'endLongitude': 112.229824,
    'endRoad': 3.977,
    'order': 1,
    'siteId': '939D9115219443AF8384A95D644BCAEE',
    'siteName': '神池南',
    'siteNo': null,
    'startLatitude': 39.072671,
    'startLongitude': 112.188974
  },
  {
    'beginRoad': 14.829,
    'endLatitude': 38.988103,
    'endLongitude': 112.281222,
    'endRoad': 16.766,
    'order': 2,
    'siteId': '92081AEA9B684316BBA64CAD20216D8F',
    'siteName': '宁武西',
    'siteNo': null,
    'startLatitude': 39.003713,
    'startLongitude': 112.290771
  },
  {
    'beginRoad': 40.601,
    'endLatitude': 38.916791,
    'endLongitude': 112.482866,
    'endRoad': 44.049,
    'order': 3,
    'siteId': '5D369BD9D8A34F8191C722B0CBE7F7CF',
    'siteName': '龙宫',
    'siteNo': null,
    'startLatitude': 38.943515,
    'startLongitude': 112.501722
  },
  {
    'beginRoad': 64.491,
    'endLatitude': 38.806677,
    'endLongitude': 112.5972,
    'endRoad': 66.204,
    'order': 4,
    'siteId': 'F30FCB8B5B6B4ECDABCC3D4BB2F2CAF0',
    'siteName': '北大牛',
    'siteNo': null,
    'startLatitude': 38.821266,
    'startLongitude': 112.591148
  },
  {
    'beginRoad': 81.578,
    'endLatitude': 38.659584,
    'endLongitude': 112.704043,
    'endRoad': 85.748,
    'order': 5,
    'siteId': '720BF1B41A384E2EBDA5003DBEFDC213',
    'siteName': '原平南',
    'siteNo': null,
    'startLatitude': 38.693297,
    'startLongitude': 112.683297
  },
  {
    'beginRoad': 107.387,
    'endLatitude': 38.573644,
    'endLongitude': 112.932803,
    'endRoad': 109.427,
    'order': 6,
    'siteId': '392BDF55316A40FE9432A94C2ACF6C7F',
    'siteName': '回凤',
    'siteNo': null,
    'startLatitude': 38.569356,
    'startLongitude': 112.910022
  },
  {
    'beginRoad': 129.604,
    'endLatitude': 38.615088,
    'endLongitude': 113.180584,
    'endRoad': 134.304,
    'order': 7,
    'siteId': 'DDEB95DAC1F8490FB015FFF033695CC8',
    'siteName': '东冶',
    'siteNo': null,
    'startLatitude': 38.642904,
    'startLongitude': 113.140316
  },
  {
    'beginRoad': 138.115,
    'endLatitude': 38.58178,
    'endLongitude': 113.227031,
    'endRoad': 140.053,
    'order': 8,
    'siteId': '0BA507C4A7304F479FE22739C9475892',
    'siteName': '南湾',
    'siteNo': null,
    'startLatitude': 38.590367,
    'startLongitude': 113.208004
  },
  {
    'beginRoad': 163.816,
    'endLatitude': 38.455398,
    'endLongitude': 113.355628,
    'endRoad': 165.987,
    'order': 9,
    'siteId': 'C1B52DCC80124DD4800EDBE75992794C',
    'siteName': '滴流磴',
    'siteNo': null,
    'startLatitude': 38.435959,
    'startLongitude': 113.350955
  },
  {
    'beginRoad': 184.184,
    'endLatitude': 38.418301,
    'endLongitude': 113.573352,
    'endRoad': 186.646,
    'order': 10,
    'siteId': '80904BB814EE4C6988F37A37C2C7E2D8',
    'siteName': '猴刎',
    'siteNo': null,
    'startLatitude': 38.423647,
    'startLongitude': 113.546692
  },
  {
    'beginRoad': 199.57,
    'endLatitude': 38.390581,
    'endLongitude': 113.750578,
    'endRoad': 203.6,
    'order': 11,
    'siteId': '90D00764AE5D43A4A52B204C8FDBBBEC',
    'siteName': '小觉',
    'siteNo': null,
    'startLatitude': 38.386634,
    'startLongitude': 113.709352
  },
  {
    'beginRoad': 218.395,
    'endLatitude': 38.293836,
    'endLongitude': 113.865013,
    'endRoad': 220.395,
    'order': 12,
    'siteId': '0945BA7FE96141AB866B946BE161915F',
    'siteName': '古月',
    'siteNo': null,
    'startLatitude': 38.310014,
    'startLongitude': 113.85777
  },
  {
    'beginRoad': 240.024,
    'endLatitude': 38.260753,
    'endLongitude': 114.119248,
    'endRoad': 244.757,
    'order': 13,
    'siteId': '8C92B7157D0C4621B8AC51F98D6EE582',
    'siteName': '西柏坡',
    'siteNo': null,
    'startLatitude': 38.263395,
    'startLongitude': 114.065348
  },
  {
    'beginRoad': 255.851,
    'endLatitude': 38.338107,
    'endLongitude': 114.207519,
    'endRoad': 257.853,
    'order': 14,
    'siteId': '5A409ACFF6A6436EAC24ECB3444725BA',
    'siteName': '三汲',
    'siteNo': null,
    'startLatitude': 38.322124,
    'startLongitude': 114.196836
  },
  {
    'beginRoad': 272.901,
    'endLatitude': 38.390554,
    'endLongitude': 114.391808,
    'endRoad': 275.164,
    'order': 15,
    'siteId': '87623D58FDE5440DB75C2A64CA363F59',
    'siteName': '灵寿',
    'siteNo': null,
    'startLatitude': 38.381852,
    'startLongitude': 114.36839
  },
  {
    'beginRoad': 290.96,
    'endLatitude': 38.448762,
    'endLongitude': 114.580394,
    'endRoad': 293.143,
    'order': 16,
    'siteId': 'DEFE0430520847148689879CFF3B0A40',
    'siteName': '行唐',
    'siteNo': null,
    'startLatitude': 38.447706,
    'startLongitude': 114.555395
  },
  {
    'beginRoad': 305.19,
    'endLatitude': 38.494917,
    'endLongitude': 114.723941,
    'endRoad': 307.49,
    'order': 17,
    'siteId': 'B3DD03A07F834565887ACFA8A0FC244A',
    'siteName': '新曲',
    'siteNo': null,
    'startLatitude': 38.489424,
    'startLongitude': 114.698567
  },
  {
    'beginRoad': 0.0,
    'endLatitude': null,
    'endLongitude': null,
    'endRoad': null,
    'order': 18,
    'siteId': '56206085C833403597EF02B566AE98E9',
    'siteName': '定州西',
    'siteNo': null,
    'startLatitude': null,
    'startLongitude': null
  },
  {
    'beginRoad': 342.082,
    'endLatitude': null,
    'endLongitude': null,
    'endRoad': 343.78,
    'order': 19,
    'siteId': '0EF920AAE76545BDAB542F7759BF6D3C',
    'siteName': '定州东',
    'siteNo': null,
    'startLatitude': null,
    'startLongitude': null
  },
  {
    'beginRoad': 358.572,
    'endLatitude': 38.441456,
    'endLongitude': 115.326673,
    'endRoad': 360.928,
    'order': 20,
    'siteId': '96613346178049FE806F11EA78D390FA',
    'siteName': '安国',
    'siteNo': null,
    'startLatitude': 38.442031,
    'startLongitude': 115.299631
  },
  {
    'beginRoad': 371.442,
    'endLatitude': 38.442392,
    'endLongitude': 115.468788,
    'endRoad': 373.7,
    'order': 21,
    'siteId': '5C29C7A44DD14DB9BCD82A93A9ABC4DE',
    'siteName': '博野',
    'siteNo': null,
    'startLatitude': 38.439202,
    'startLongitude': 115.443281
  },
  {
    'beginRoad': 382.02,
    'endLatitude': 38.465228,
    'endLongitude': 115.591873,
    'endRoad': 384.85,
    'order': 22,
    'siteId': '4404C4F2C18246D79CD14BEA784D7085',
    'siteName': '蠡县',
    'siteNo': null,
    'startLatitude': 38.462469,
    'startLongitude': 115.559686
  },
  {
    'beginRoad': 416.369,
    'endLatitude': 38.446223,
    'endLongitude': 115.964418,
    'endRoad': 418.415,
    'order': 24,
    'siteId': '8D5E71A8450D4CC1A9AFFF21D1D3A369',
    'siteName': '太师庄',
    'siteNo': null,
    'startLatitude': 38.44842,
    'startLongitude': 115.941173
  },
  {
    'beginRoad': 425.368,
    'endLatitude': 38.456209,
    'endLongitude': 116.069858,
    'endRoad': 427.737,
    'order': 25,
    'siteId': '2AD5148DE78D4002B3E3D362C97E299E',
    'siteName': '河间',
    'siteNo': null,
    'startLatitude': 38.451611,
    'startLongitude': 116.043384
  },
  {
    'beginRoad': 445.45,
    'endLatitude': 38.448706,
    'endLongitude': 116.292863,
    'endRoad': 447.351,
    'order': 26,
    'siteId': 'CD59C63655B24BAAB16507DC60B9AEA7',
    'siteName': '行别营',
    'siteNo': null,
    'startLatitude': 38.451048,
    'startLongitude': 116.271334
  },
  {
    'beginRoad': 462.985,
    'endLatitude': 38.408036,
    'endLongitude': 116.483646,
    'endRoad': 465.0,
    'order': 27,
    'siteId': '7D7A3FA74E9347BBB4EECBF2CFF3342F',
    'siteName': '黎民居',
    'siteNo': null,
    'startLatitude': 38.412923,
    'startLongitude': 116.461455
  },
  {
    'beginRoad': 473.585,
    'endLatitude': 38.388447,
    'endLongitude': 116.600674,
    'endRoad': 475.545,
    'order': 28,
    'siteId': 'A8047E0462C54C34AFF7A90CC4179D17',
    'siteName': '杜生',
    'siteNo': null,
    'startLatitude': 38.389271,
    'startLongitude': 116.578245
  },
  {
    'beginRoad': 0.0,
    'endLatitude': null,
    'endLongitude': null,
    'endRoad': null,
    'order': 29,
    'siteId': '9B040497F5C04E05BC21F9B112E1784E',
    'siteName': '沧州西',
    'siteNo': null,
    'startLatitude': null,
    'startLongitude': null
  },
  {
    'beginRoad': 515.05,
    'endLatitude': 38.330316,
    'endLongitude': 117.326601,
    'endRoad': 561.0,
    'order': 30,
    'siteId': '5E22C63CD83F445DB48EA24448A5F085',
    'siteName': '李天木',
    'siteNo': null,
    'startLatitude': 38.336249,
    'startLongitude': 117.265675
  },
  {
    'beginRoad': 535.591,
    'endLatitude': 38.30609,
    'endLongitude': 117.552032,
    'endRoad': 540.961,
    'order': 31,
    'siteId': '558A1EFE93BC40558676D08C96AA9675',
    'siteName': '黄骅南',
    'siteNo': null,
    'startLatitude': 38.325845,
    'startLongitude': 117.038425
  },
  {
    'beginRoad': 558.905,
    'endLatitude': 38.306037,
    'endLongitude': 117.55225,
    'endRoad': 561.02,
    'order': 32,
    'siteId': '1F68FA930A6849A19AB536FC40AC2F3A',
    'siteName': '段庄',
    'siteNo': null,
    'startLatitude': 38.311719,
    'startLongitude': 117.529156
  }
]

export const siteList = [
  {
    'siteName': '神池南',
    'siteId': '939D9115219443AF8384A95D644BCAEE',
    'longitude': 112.188974,
    'latitude': 39.072671
  },
  {
    'siteName': '宁武西',
    'siteId': '92081AEA9B684316BBA64CAD20216D8F',
    'longitude': 112.290771,
    'latitude': 39.003713
  },
  {
    'siteName': '龙宫',
    'siteId': '5D369BD9D8A34F8191C722B0CBE7F7CF',
    'longitude': 112.501722,
    'latitude': 38.943515
  },
  {
    'siteName': '北大牛',
    'siteId': 'F30FCB8B5B6B4ECDABCC3D4BB2F2CAF0',
    'longitude': 112.591148,
    'latitude': 38.821266
  },
  {
    'siteName': '原平南',
    'siteId': '720BF1B41A384E2EBDA5003DBEFDC213',
    'longitude': 112.683297,
    'latitude': 38.693297
  },
  {
    'siteName': '回凤',
    'siteId': '392BDF55316A40FE9432A94C2ACF6C7F',
    'longitude': 112.910022,
    'latitude': 38.569356
  },
  {
    'siteName': '东冶',
    'siteId': 'DDEB95DAC1F8490FB015FFF033695CC8',
    'longitude': 113.140316,
    'latitude': 38.642904
  },
  {
    'siteName': '南湾',
    'siteId': '0BA507C4A7304F479FE22739C9475892',
    'longitude': 113.208004,
    'latitude': 38.590367
  },
  {
    'siteName': '滴流磴',
    'siteId': 'C1B52DCC80124DD4800EDBE75992794C',
    'longitude': 113.350955,
    'latitude': 38.435959
  },
  {
    'siteName': '猴刎',
    'siteId': '80904BB814EE4C6988F37A37C2C7E2D8',
    'longitude': 113.546692,
    'latitude': 38.423647
  },
  {
    'siteName': '小觉',
    'siteId': '90D00764AE5D43A4A52B204C8FDBBBEC',
    'longitude': 113.709352,
    'latitude': 38.386634
  },
  {
    'siteName': '古月',
    'siteId': '0945BA7FE96141AB866B946BE161915F',
    'longitude': 113.85777,
    'latitude': 38.310014
  },
  {
    'siteName': '西柏坡',
    'siteId': '8C92B7157D0C4621B8AC51F98D6EE582',
    'longitude': 114.065348,
    'latitude': 38.263395
  },
  {
    'siteName': '三汲',
    'siteId': '5A409ACFF6A6436EAC24ECB3444725BA',
    'longitude': 114.196836,
    'latitude': 38.322124
  },
  {
    'siteName': '灵寿',
    'siteId': '87623D58FDE5440DB75C2A64CA363F59',
    'longitude': 114.36839,
    'latitude': 38.381852
  },
  {
    'siteName': '行唐',
    'siteId': 'DEFE0430520847148689879CFF3B0A40',
    'longitude': 114.555395,
    'latitude': 38.447706
  },
  {
    'siteName': '新曲',
    'siteId': 'B3DD03A07F834565887ACFA8A0FC244A',
    'longitude': 114.698567,
    'latitude': 38.489424
  },
  {
    'siteName': '定州西',
    'siteId': '56206085C833403597EF02B566AE98E9',
    'longitude': null,
    'latitude': null
  },
  {
    'siteName': '定州东',
    'siteId': '0EF920AAE76545BDAB542F7759BF6D3C',
    'longitude': null,
    'latitude': null
  },
  {
    'siteName': '安国',
    'siteId': '96613346178049FE806F11EA78D390FA',
    'longitude': 115.299631,
    'latitude': 38.442031
  },
  {
    'siteName': '博野',
    'siteId': '5C29C7A44DD14DB9BCD82A93A9ABC4DE',
    'longitude': 115.443281,
    'latitude': 38.439202
  },
  {
    'siteName': '蠡县',
    'siteId': '4404C4F2C18246D79CD14BEA784D7085',
    'longitude': 115.559686,
    'latitude': 38.462469
  },
  {
    'siteName': '太师庄',
    'siteId': '8D5E71A8450D4CC1A9AFFF21D1D3A369',
    'longitude': 115.941173,
    'latitude': 38.44842
  },
  {
    'siteName': '河间',
    'siteId': '2AD5148DE78D4002B3E3D362C97E299E',
    'longitude': 116.043384,
    'latitude': 38.451611
  },
  {
    'siteName': '行别营',
    'siteId': 'CD59C63655B24BAAB16507DC60B9AEA7',
    'longitude': 116.271334,
    'latitude': 38.451048
  },
  {
    'siteName': '黎民居',
    'siteId': '7D7A3FA74E9347BBB4EECBF2CFF3342F',
    'longitude': 116.461455,
    'latitude': 38.412923
  },
  {
    'siteName': '杜生',
    'siteId': 'A8047E0462C54C34AFF7A90CC4179D17',
    'longitude': 116.578245,
    'latitude': 38.389271
  },
  {
    'siteName': '沧州西',
    'siteId': '9B040497F5C04E05BC21F9B112E1784E',
    'longitude': null,
    'latitude': null
  },
  {
    'siteName': '李天木',
    'siteId': '5E22C63CD83F445DB48EA24448A5F085',
    'longitude': 117.265675,
    'latitude': 38.336249
  },
  {
    'siteName': '黄骅南',
    'siteId': '558A1EFE93BC40558676D08C96AA9675',
    'longitude': 117.038425,
    'latitude': 38.325845
  },
  {
    'siteName': '段庄',
    'siteId': '1F68FA930A6849A19AB536FC40AC2F3A',
    'longitude': 117.529156,
    'latitude': 38.311719
  }
]

